<template>
  <div class="tabs-wrap border-box">
    <div class="tabs">
      <slot></slot>
    </div>
    <div class="tab-hover"
         :style="{left:tabHover.left + 'px',width:tabHover.width + 'px',height:tabHover.height + 'px'}"></div>
    <div class="tab-active"
         :style="{left:tabActive.left + 'px',width:tabActive.width + 'px',height:tabActive.height + 'px'}"></div>
  </div>
</template>

<script lang="ts">
  import { Component, Vue } from "@some21/vue-class-decorator";

  @Component({
    name: "JuTabs",
  })
  export default class extends Vue {}
</script>

<style lang="scss" scoped>
  .tabs-wrap {
    padding: 1rem 0.75rem 0;
    position: relative;
  }

  .tabs {
    > .tab-hover {
      background-color: rgba(var(--theme-primary-rgb), 0.3);
      height: 0;
      bottom: 0;
      left: 0;
      width: 0;
      font-size: 0;
      transition: width 0.1s ease-in-out, height 0.1s ease-in-out, left 0.3s ease-in-out;
      position: absolute;
      z-index: 10;
      pointer-events: none;
      border-radius: 0.25rem;
    }

    &:before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 0;
      width: 100%;
      height: 2px;
      background-color: var(--theme-gray-300);
    }
  }
</style>
